@(id: Int)(implicit request: RequestHeader,messages: Messages)
@main(messages("dataView"))("dataManage", "") {

	<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/tableFilter.css")">

	<script src="@routes.Assets.at("bootstrap-table-master/dist/extensions/filter-control/my-bootstrap-table-filter-control.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("react/js/react.production.min.js")"></script>
	<script src="@routes.Assets.at("react/js/react-dom.production.min.js")"></script>

	<style>
			.genome-pre {
				white-space: pre-wrap;
				word-wrap: break-word;
				border: 0px solid #ccc;
				background-color: white;
			}

			select:not([multiple]) {
				-webkit-appearance: none;
				-moz-appearance: none;
				background-position: right 50%;
				background-repeat: no-repeat;
				background-image: url();
				padding: .5em;
				padding-right: 1.5em
			}

			.fr {
				float: right;
			}

			.base-info .item .title span {
				display: inline-block;
				border-left: 2px solid #0b8af4;
				font-size: 14px;
				color: #333;
				padding-left: 10px;
			}

			.photo span {
				display: block;
				width: 92px;
				height: 92px;
			}

			.photo img {
				width: 100%;
				height: 100%;
			}

			tr > td {
				padding-top: 10px !important;
				padding-bottom: 10px !important;
			}

			.glyphicon-remove::before {
				content: "" !important;
			}

			.fglefttitle {
				font-size: 30px;
				font-weight: lighter;
				color: #A2A2A2;
			}

			.form-horizontal .has-feedback .form-control-feedback {
				top: 0;
				right: -15px !important;
			}

	</style>
	<div class="page-content">

		<div class="row">
			<div class="col-md-12">
				<div id="form_wizard_1" class="portlet light profile-sidebar-portlet bordered">

					<div class="portlet-title">
						<div class="item">
							<div class="title clear">
								<a href="@routes.DataController.manageBefore">@messages("dataManagement")</a> /
								<span>@messages("dataView")</span>
							</div>
						</div>
						<div class="caption">
						</div>
					</div>

					<div class="portlet-body form">

						<h4>@messages("fileInfo")</h4>

						<form class="form-horizontal" role="form" id="fileInfo">
							<div class="form-body">

								<div class="row">
									<div class="col-md-12">
										<div class="form-group">
											<label class="control-label col-md-2">@messages("fileName"):</label>
											<div class="col-md-4">
												<p class="form-control-static" id="fileName">  </p>
											</div>
											<label class="control-label col-md-2">@messages("tag"):</label>
											<div class="col-md-4">
												<p class="form-control-static" id="tags">  </p>
											</div>
										</div>
									</div>
								</div>

								<div class="row">
									<div class="col-md-12">
										<div class="form-group">
											<label class="control-label col-md-2">@messages("size"):</label>
											<div class="col-md-4">
												<p class="form-control-static" id="size">  </p>
											</div>
											<label class="control-label col-md-2">@messages("uploadModifyTime"):</label>
											<div class="col-md-4">
												<p class="form-control-static" id="uploadTime">  </p>
											</div>
										</div>
									</div>
								</div>

								<div class="row">
									<div class="col-md-12">
										<div class="form-group">
											<label class="control-label col-md-2">@messages("comment"):</label>
											<div class="col-md-4">
												<p class="form-control-static" id="comment">  </p>
											</div>
@*											<label class="control-label col-md-2">Test:</label>*@
@*											<div class="col-md-4">*@
@*												<p class="form-control-static" id="example">  </p>*@
@*											</div>*@
										</div>
									</div>
								</div>

							</div>
						</form>

						<h4>@messages("fileContent")</h4>

						<div class="table-responsive">

							<table class="display table table-bordered" id="table" data-click-to-select="true"
							data-page-list="[10, 25, 50, 100, all]" >
								<thead>

									<tr class="myTr">

									</tr>

								</thead>
							</table>

						</div>

					</div>

				</div>
			</div>
		</div>
	</div>

	<script>

			var id = "@id"

			$(function () {
				DataDetail.init

			})
	</script>


}
